<!DOCTYPE html>
<html>
	<head lang="zh">
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1,user-scalable=0"
		/>
		<title>Luckysheet</title>

		<link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
		<link rel="stylesheet" href="./plugins/plugins.css" />
		<link rel="stylesheet" href="./css/luckysheet.css" />
		<link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
		<script src="./plugins/js/plugin.js"></script>

		<!-- rollup luckysheet.js -->
		<script src="./luckysheet.umd.js"></script>
	</head>

	<body>
		<!-- Non-full screen test -->
		<!-- <div style="position: relative;width: 100%;height: 100%;">

		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
	</div> -->

		<div
			id="luckysheet"
			style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"
		></div>
		<script src="./demoData/sheetCell.js"></script>
		<script>
			$(function() {
				// According to the browser language
				// var lang = luckysheetDemoUtil.language() === "zh" ? "zh" : "en";
				// var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
				// var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
				// var options = null;

				// if (isShare || gridKey) {
				// 	// http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
				// 	if (!gridKey) {
				// 		alert(
				// 			"If gridKey is not provided in the address bar, please add it in the source code"
				// 		);
				// 	}
				// 	options = {
				// 		container: "luckysheet",
				// 		lang: "zh",
				// 		allowUpdate: true,
				// 		updateImageUrl: location.origin + "/luckysheet/api/updateImg",
				// 		updateUrl:
				// 			"ws://" + location.host + "/luckysheet/websocket/luckysheet",
				// 		gridKey: gridKey,
				// 		loadUrl: location.origin + "/luckysheet/api/load",
				// 		loadSheetUrl: location.origin + "/luckysheet/api/loadsheet",
				// 	};
				// } else {
				// http://localhost:3000/
				options = {
					container: "luckysheet",
					lang: "zh",
					// pager: {
					// 	pageIndex: 1,
					// 	pageSize: 10,
					// 	total: 50,
					// 	selectOption: [10, 20]
					// },
					forceCalculation: false,
					plugins: ["chart"],
					// fontList: [
					// 	{
					// 		fontName: "HanaleiFill",
					// 		url: "./assets/iconfont/HanaleiFill-Regular.ttf",
					// 	},
					// 	{
					// 		fontName: "Anton",
					// 		url: "./assets/iconfont/Anton-Regular.ttf",
					// 	},
					// 	{
					// 		fontName: "Pacifico",
					// 		url: "./assets/iconfont/Pacifico-Regular.ttf",
					// 	},
					// ],
					data: [
						sheetCell,
						// sheetFormula,
						// sheetConditionFormat,
						// sheetSparkline,
						// sheetTable,
						// sheetComment,
						// sheetPivotTableData,
						// sheetPivotTable,
						// sheetChart,
						// sheetPicture,
						// sheetDataVerification,
					],
				};
				// }
				options.loading = {
					image: () => {
						return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`;
					},
					imageClass: "loadingAnimation",
				};
				// options.cellRightClickConfig = {
				// 	customs: [
				// 		{
				// 			title: "test",
				// 			onClick: function(clickEvent, event, params) {
				// 				console.log("function test click", clickEvent, event, params);
				// 			},
				// 		},
				// 	],
				// };
				luckysheet.create(options);
			});
		</script>
		<style>
			/* 自定义loading演示样式 */
			@keyframes loading-rotate {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			@keyframes loading-dash {
				0% {
					stroke-dasharray: 1, 200;
					stroke-dashoffset: 0;
				}

				50% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -40px;
				}

				100% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -120px;
				}
			}

			.loadingAnimation {
				width: 3em;
				height: 3em;
				animation: loading-rotate 2s linear infinite;
			}

			.loadingAnimation circle {
				animation: loading-dash 1.5s ease-in-out infinite;
				stroke-dasharray: 90, 150;
				stroke-dashoffset: 0;
				stroke-width: 2;
				stroke: currentColor;
				stroke-linecap: round;
			}
		</style>
	</body>
</html>
